<template>
  <a-card
    :bordered="false"
    :title="contractInfo.contractType === 2 ? '采购合同清单' : '项目合同清单' ">
    <div class="table-operator">
      <a-row :gutter="24">
        <a-col :md="8">
          <a-button
            type="primary"
            icon="plus"
            v-if="realBuySave"
            @click="productAdd">新建</a-button>
        </a-col>
        <a-col :md="8">
        </a-col>
        <a-col :md="8">
          <!-- <span style="margin-right: 30px;font-size: 18px; font-weight: bold; float: right">总金额: {{ contractInfo.money }}</span> -->
        </a-col>
      </a-row>
    </div>
    <div>
      <a-spin :spinning="loading">
        <a-table
          ref="productTable"
          size="default"
          rowKey="goodsId"
          :columns="productColumns"
          :dataSource="products"
          :pagination="false">
          <span
            slot="serial"
            slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span
            slot="action"
            slot-scope="text, record">
            <template>
              <a
                v-if="realBuyUpdate"
                @click="handleEdit(record)">配置</a>
              <a-divider type="vertical" />
              <a
                v-if="realBuyDelete"
                @click="handleDelete(record)">移除</a>
            </template>
          </span>
        </a-table>
      </a-spin>
    </div>
    <product-form
      ref="productModal"
      :visible="visible"
      :suppliers="suppliers"
      :loading="confirmLoading"
      @resetSuppliers="resetSuppliers"
      @cancel="handleCancel"
      @ok="handleOk" />
  </a-card>

</template>

<script>
// getGoodsList, saveGoods, updateGoods, deleteGoods
import { supplierInfo, getGoodsSelect, saveGoods, updateGoods, deleteGoods } from '@/api/manage'
import { productColumns } from '../config'
import { STable } from '@/components'
import ProductForm from '@/views/contract/modules/ProductForm'
import { message, Modal } from 'ant-design-vue'
import { mapGetters } from 'vuex'
import { isInMenu } from '../../config'

export default {
  name: 'ProductList',
  props: {
    contractInfo: {
      type: Object,
      default: null
    }
  },
  components: {
    STable,
    ProductForm
  },
  data () {
    this.productColumns = productColumns
    return {
      isAdd: false,
      isEdit: false,
      visible: false,
      loading: false,
      suppliers: undefined,
      confirmLoading: false,
      products: undefined,
      prorecord: undefined,
      goods: undefined,
      type: undefined
    }
  },
  computed: {
    ...mapGetters(['menu'])
  },
  watch: {
    contractInfo: function (info) {
    const contractId = this.$route.query.contractId

    this.type = this.contractInfo.contractType === 2 ? 3 : 1
    this.loading = true
    isInMenu(this.menu, 'ROLE_but:goods:select') &&
      getGoodsSelect({ type: this.type, contractId }).then(res => {
        this.products = res.data
        this.loading = false
    })
    isInMenu(this.menu, 'ROLE_but:supplier:list') &&
      supplierInfo({ page: 1, limit: 9999 }).then(res => {
        this.suppliers = res.data
      })
    }
  },
  created () {
    // 实际采购
    this.realBuySave = isInMenu(this.menu, 'ROLE_but:goods:save')
    this.realBuyUpdate = isInMenu(this.menu, 'ROLE_but:goods:update')
    this.realBuyDelete = isInMenu(this.menu, 'ROLE_but:goods:delete')
  },
  mounted () {

  },
  methods: {
    productAdd () {
      this.visible = true
      this.isAdd = true
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs.productModal.form.setFieldsValue({ type: this.type })
      })
    },
    handleEdit (record) {
      this.visible = true
      this.isEdit = true
      this.isAdd = false
      const form = this.$refs.productModal.form
      this.goods = record
      this.$nextTick(() => {
        form.setFieldsValue(record)
      })
    },
    resetSuppliers () {
      isInMenu(this.menu, 'ROLE_but:supplier:list') &&
        supplierInfo({ page: 1, limit: 9999 }).then(res => {
          this.suppliers = res.data
        })
    },
    handleDelete (record) {
      Modal.confirm({
        title: '删除采购清单',
        content: '删除后数据不再展示，需要查看请联系开发',
        onOk: () => {
          this.loading = true
          const contractId = this.$route.query.contractId

          deleteGoods({ goodsId: record.goodsId })
            .then(() => {
              message.success('删除成功')
              getGoodsSelect({ type: this.type, contractId }).then(res => {
                this.products = res.data
                this.loading = false
              })
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$refs.productModal.form.resetFields()
    },
    handleOk () {
      const form = this.$refs.productModal.form
      const contractId = this.$route.query.contractId

      form.validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoading = true

          if (this.isAdd) {
            saveGoods(Object.assign({}, values, { contractId }))
              .then(res => {
                // this.visible = false
                message.success('新增成功')
                form.resetFields()
                form.setFieldsValue({ type: this.type })
              })
              .then(() => {
                this.loading = true
                getGoodsSelect({ type: this.type, contractId }).then(res => {
                  this.products = res.data
                  this.loading = false
                })
              })
              .finally(() => {
                this.confirmLoading = false
              })
          } else {
            updateGoods(
              Object.assign({}, values, {
                goodsId: this.goods.goodsId,
                contractId: this.contractInfo.contractId
              })
            )
              .then(res => {
                // this.visible = false
                message.success('修改成功')
                form.resetFields()
                form.setFieldsValue({ type: this.type })
              })
              .then(() => {
                this.loading = true
                getGoodsSelect({ type: this.type, contractId: this.contractInfo.contractId }).then(res => {
                  this.products = res.data
                  this.loading = false
                })
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
    tableCustomRow (record, index) {
      return {
        on: {
          click: event => {
            this.prorecord = record
          }
        }
      }
    }
  }
}
</script>
